$(function () {
  var selector = $("#playground #tab_selector").val();
  $("#playground").tabs({
    selected: selector,
    show: function (event, ui) {
      if (/.*#fans$/.test($(ui.tab).attr('href'))) {
        var fans_e = $(ui.panel).children(".fans_item");
        fans_e.text("");
        $(ui.panel).children("input:last").attr('disabled', '');        
        var ret = append_item(fans_e, 0, 10, "/accounts/api/fans");
        var offset = ret[0];
        var fans_cnt = ret[1];
        $("#playground #offset").val(offset);
        if (fans_cnt < 10) {
          $(ui.panel).children("input:last").attr('disabled', 'disabled');
        }
        return;
      }
      if (/.*#friends$/.test($(ui.tab).attr('href'))) {
        var friends_e = $(ui.panel).children(".friends_item");
        friends_e.text("");
        $(ui.panel).children("input:last").attr('disabled', '');        
        var ret = append_item(friends_e, 0, 10, "/accounts/api/friends");
        var friends_cnt = ret[0];
        var offset = ret[1];
        $("#playground #offset").val(offset);
        if (friends_cnt < 10) {
          $(ui.panel).children("input:last").attr('disabled', 'disabled');
        }
        return;
      }
    }
  });
  $("#playground #load_more_fans").click(function () {
    var idx = $("#playground").tabs("option", "selected");
    var fans_e = $($("#playground > div.tab")[idx]).children(".fans_item");
    var offset = $("#playground #offset").val(); 
    offset = parseInt(offset)
    var ret = append_item(fans_e, offset, 10, "/accounts/api/fans");
    var offset = ret[0];
    var fans_cnt = ret[1];
    $("#playground #offset").val(offset);
    if (fans_cnt < 10) {
      $(this).attr('disabled', 'disabled');
    }
  });


  $("#playground #load_more_friends").click(function () {
    var idx = $("#playground").tabs("option", "selected");
    var friends_e = $($("#playground > div.tab")[idx]).children(".friends_item");
    var offset = $("#playground #offset").val(); 
    offset = parseInt(offset)
    var ret = append_item(friends_e, offset, 10, "/accounts/api/friends");
    var offset = ret[0];
    var fans_cnt = ret[1];
    $("#playground #offset").val(offset);
    if (fans_cnt < 10) {
      $(this).attr('disabled', 'disabled');
    }
  });

});


/**
 * @brief           -   This function read fans items from a web service
 *                      and append the items to an element
 * @param e         -   element to be appended
 * @param offset    -   offset of the data to be fetched 
 * @param count     -   number of items to sent
 * @param url       -   the web service url
 */
function append_item(e, offset, count, url) {
    var ret;
    var data;
    data = {'offset':offset,'count':count}
    $.ajax({
        type: 'GET',
        async: false,
        url: url,
        data: data,
        dataType: 'json',
        success: function(msg, textStatus) {
            ret = [offset + msg.length, msg.length];
            for (var i = 0; i < msg.length; ++i) {
                var fans = msg[i];
                var new_fans_e = $('.mini_person_item').clone();
                new_fans_e.removeClass('mini_person_item').addClass('mini_fans_item');
                new_fans_e.children('.mini_person_avatar').attr('src', fans.avatar).attr('width',48).attr('height',48)
                new_fans_e.children('.mini_person_name').html("<a href=\"/member/space/" + fans.name + "\">" + fans.name + "</a>");
                e.append(new_fans_e);
            }
            
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error have occ");
        }
    });
    return ret;
}

